<template>
    <!--
        v-if 这个内置指令, 如果条件为 假, 那么这个标签就不在渲染
     -->
    <h1 v-if="num === 10086">标题1, 基于一个条件, 让这个标签展示或者隐藏</h1>
    <h1 v-if="num === 10010">标题2, 基于一个条件, 让这个标签展示或者隐藏</h1>
    <h1 v-if="flag">标题3, 基于一个条件, 让这个标签展示或者隐藏</h1>

    <!--
        v-show 这个内置指令, 不管条件是否成立, 这个标签一定会加载

            如果这个条件为失败, 那么给这个标签 设置一个 display: none
     -->
    <h1 v-show="flag">标题4, 基于一个条件, 让这个标签展示或者隐藏</h1>
    <h1 v-show="num === 10010">标题5, 基于一个条件, 让这个标签展示或者隐藏</h1>


    <!--
        如何选择
            因为 v-if 如果条件是假, 那么不会渲染标签
            v-show 无论无何都会渲染标签

            如果展示隐藏切换的不频繁使用 v-if
            否则使用 v-show
     -->
</template>

<script>
export default {
    data() {
        return {
            num: 10086,
            flag: true,
        };
    },
};
</script>
